<template>
  <div class="modify-teacher">
    <header class="modify-header">
      <div class="left">
        <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
        <span>|</span>
        <span>批改作业</span>
      </div>
      <div class="right">
        课程管理系统
      </div>
    </header>
    <main class="modify-main">
      <el-table :data="tableData" style="width: 100%" stripe>
        <el-table-column prop="id" label="提交作业编号" align="center">
        </el-table-column>
        <el-table-column prop="question.questionTopicIntroduction" label="问题前言" align="center">
        </el-table-column>
        <el-table-column prop="student.className" label="班级名称" align="center">
        </el-table-column>
        <el-table-column prop="student.studentName" label="学生姓名" align="center">
        </el-table-column>
        <el-table-column prop="submissioUrl" label="作业文件" align="center">
          <template slot-scope="scope">
            <span v-if="!scope.row.submissioUrl">无</span>
            <el-link v-else :href="scope.row.submissioUrl" type="primary" target="_blank" class="underline-link"><i
                class="el-icon-folder-opened" style="font-size: 1.5em"></i></el-link>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="作业分数" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="blueBug" @click="eHandle(scope.row, scope.row.id)">
              批改
            </el-button>
            <el-button type="text" size="small" class="blueBug" @click="editHandle(scope.row.id, scope.row.grade)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page" :page-size="size"
        :page-sizes="pageSizes" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float: right;">
      </el-pagination>
      <el-dialog title="修改作业分数" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span style="margin-right: 5%;">作业分数</span>
        <el-input-number class="item" v-model="editGrade" :min="0" :max="100" label="小组分" required></el-input-number>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
      </el-dialog>
    </main>
  </div>
</template>

<script>
import { getSubmittedAssignmentListAPI, editSubmittedAssignmentsAPI } from "@/api/submittedAssignments";

export default {
  data() {
    return {
      assignmentId: '',
      submittedAssignmentsList: [],
      dialogVisible: false,
      editGrade: 0,
      edsubmittedAssignmentsId: '', // 修改的编号
      //分页
      page: 1, //第几页
      size: 10, //一页多少条
      total: 0, //总条目数
      pageSizes: [5, 10, 20, 30], //可选择的一页多少条
      tableData: [], //表格绑定的数据
    }
  },
  created() {
    this.getTabelData2();
  },

  mounted() {
    this.assignmentId = this.$route.query.assignmentId
    // console.log(this.assignmentId);
    this.getsubmittedAssignmentsList()
    // this.getTabelData2()

  },

  methods: {
    //分页
    //获取表格数据，自行分页(slice)
    getTabelData() {
      //为全部数据
      this.tableData = this.submittedAssignmentsList.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.submittedAssignmentsList.length
    },
    //获取表格数据，自行分页（splice）
    getTabelData2() {
      let data = JSON.parse(JSON.stringify(this.submittedAssignmentsList))
      this.tableData = data.splice(
        (this.page - 1) * this.size,
        this.size
      );
      this.total = this.submittedAssignmentsList.length
    },
    //page改变时的回调函数，参数为当前页码
    currentChange(val) {
      console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTabelData2();
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1;
      this.getTabelData2();
    },
    // 获取提交的作业列表
    getsubmittedAssignmentsList() {
      getSubmittedAssignmentListAPI('','',this.assignmentId).then((res) => {
        if (res.code === 200) {
          this.submittedAssignmentsList = res.data
          this.getTabelData()
        } else {
          this.$message.error('获取提交的作业失败!')
        }
      }).catch((error) => {
        console.log(error);
      })
    },
    // 编辑按钮
    editHandle(submittedAssignmentsId, grade) {
      this.edsubmittedAssignmentsId = submittedAssignmentsId
      this.editGrade = grade
      this.dialogVisible = true
    },
    eHandle(submittedAssignments, submittedAssignmentsId) {
      this.$router.push({
        path: '/seeSubmittedAssignments',
        query: {
          submittedAssignments: submittedAssignments,
          submittedAssignmentsId: submittedAssignmentsId
        }
      });
    },
    // 叉号
    handleClose() {
      this.dialogVisible = false
    },
    // 确定按钮
    confirm() {
      // edsubmittedAssignmentsId
      const bodyData = {
        grade: this.editGrade
      }
      editSubmittedAssignmentsAPI(this.edsubmittedAssignmentsId, bodyData).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.message)
          this.handleClose()
          this.getsubmittedAssignmentsList()
        } else {
          this.$message.error(res.message)
        }
      }).catch((error) => {
        console.log(error);
      })

    }
  },

}
</script>

<style scoped lang="scss">
.modify-teacher {
  background-color: #f4f6f8;
  height: 100vh;

  .modify-header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;

    .left {
      span {
        margin-right: 4px;
      }

      .arrow {
        cursor: pointer;
      }
    }

    .right {
      text-align: right;
    }
  }

  .modify-main {
    background: #f4f6f8;
    padding: 20px 130px;

    .tableLab {
      margin-left: 0;
    }

    .form-container {
      background-color: #fff;
      padding-left: 300px;
      padding-right: 300px;
      padding-bottom: 100px;

      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
      }

      .form {
        margin-bottom: 20px;
        padding: 20px 65px 24px;

        .el-form {
          display: flex;
          flex-wrap: wrap;

          .el-form-item {
            width: 50%;
          }
        }
      }
    }
  }

  .modify-footer {
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding: 30px 50px;
    color: #000000d9;
    font-size: 18px;
    background: #fff;
    text-align: center;
  }

}
</style>